<script lang="ts" setup>
import { ClassInfoApi } from '@/apis'
import { useDownload } from '@/hooks'
import getAvatar from '@/utils/avatar'
import ImportClassStudent from './ImportClassStudent.vue'

const route = useRoute()
const router = useRouter()

const onCreate = () => {
  router.push({ path: '/shop/enrollment/order/create' })
}

// 转班
const onClassChange = (record: ClassInfoApi.ClassStudentResp, changeType: string) => {
  router.push({ path: '/education/class/change/create', query: { type: changeType, studentId: record.studentId } })
}

// 退课
const onClassCancel = (record: ClassInfoApi.ClassStudentResp, changeType: string) => {
  router.push({ path: '/education/class/cancel/create', query: { type: changeType, studentId: record.studentId } })
}
const loading = ref<boolean>(false)
const studentList = ref<ClassInfoApi.ClassStudentResp[]>([])
const getList = async () => {
  loading.value = true
  ClassInfoApi.getClassStudentList(route.query.id as string).then((res) => {
    studentList.value = res || []
  }).finally(() => {
    loading.value = false
  })
}

const importClassStudent = ref<InstanceType<typeof ImportClassStudent>>()
const importStudent = () => {
  importClassStudent.value?.open(route.query.id as string)
}

const exportStudent = () => {
  useDownload(() => ClassInfoApi.exportClassStudents(route.query.id as string))
}
const gotoStudentDetail = (id) => {
  router.push({ path: '/shop/enrollment/student/detail', query: { id } })
}

const gotoEnrollmentDetail = (id) => {
  router.push({ path: '/education/class/enroll/detail', query: { id } })
}

onMounted(() => {
  getList()
})
</script>

<template>
  <div class="roster">
    <div class="flex flex-justify-between">
      <a-space>
        <a-button v-permission="['edu:student:manage']" type="primary" size="small" @click="onCreate">
          <icon-plus />
          新的报名
        </a-button>
        <a-button v-permission="['edu:student:manage']" size="small" @click="importStudent">
          <icon-plus />
          导入学员
        </a-button>
        <a-button v-permission="['edu:class:export']" size="small" @click="exportStudent">
          <icon-download />
          导出学员
        </a-button>
      </a-space>
      <!-- <a-radio-group type="button" size="small">
        <a-radio value="0">
          全部
        </a-radio>
        <a-radio value="1">
          正常
        </a-radio>
        <a-radio value="2">
          转入
        </a-radio>
      </a-radio-group> -->
    </div>
    <a-spin class="w-full" style="min-height: 400px;" :loading="loading">
      <div class="mt-20px flex flex-wrap gap-15px">
        <a-empty v-if="studentList.length === 0">
          学生列表为空
        </a-empty>
        <div v-for="(item, index) in studentList" v-else :key="index" class="item">
          <div class="flex gap-2">
            <a-image width="54" :src="getAvatar(item.avatar, item.gender)" />
            <div class="flex-1">
              <div class="mb-2 flex flex-justify-between text-16px color-#165DFF font-400">
                <a-space>
                  <span class="cursor-pointer" @click="gotoStudentDetail(item.studentId)">{{ item.name }}</span>
                  <CellDict v-if="item.studentJoinType !== 1" :value="item.studentJoinType" code="JoinTypeEnum" />
                </a-space>
                <a-dropdown trigger="hover">
                  <icon-more class="cursor-pointer" />
                  <template #content>
                    <a-doption v-permission="['edu:class-change:manage']" @click="onClassChange(item, 'CHANGE_CLASS')">
                      转班
                    </a-doption>
                    <a-doption v-permission="['edu:class-change:manage']" @click="onClassChange(item, 'CHANGE_LESSON')">
                      调课
                    </a-doption>
                    <a-doption v-permission="['edu:class-cancel:manage']" @click="onClassCancel(item, 'CANCEL_CLASS')">
                      退班
                    </a-doption>
                    <a-doption v-permission="['edu:class-cancel:manage']" @click="onClassCancel(item, 'CANCEL_LESSON')">
                      退课
                    </a-doption>
                  </template>
                </a-dropdown>
              </div>
              <a-typography-text copyable>
                {{ item.parentPhone }}
              </a-typography-text>
            </div>
          </div>
          <a-divider :margin="10" />
          <div class="flex-row-between-center">
            <div class="flex-col-between-center flex-1 cursor-pointer" @click="gotoEnrollmentDetail(item.enrollment.id)">
              <div class="mb-4px">
                <span class="font-size-18px color-#111 font-600">
                  {{ item.enrollment.enrollLessonCount - item.enrollment.cancelLessonCount }}</span>
                <span class="text-13px color-#86909C">次</span>
              </div>
              <div class="text-12px color-gray-5">
                报名课次
              </div>
            </div>
            <a-divider direction="vertical" style="height: 16px;" :margin="0" />
            <div class="flex-col-between-center flex-1">
              <div class="mb-4px">
                <span class="font-size-18px color-#111 font-600">{{ item.enrollment.remainLessonChangeCount }}</span>
                <span class="text-13px color-#86909C">次</span>
              </div>
              <div class="text-12px color-gray-5">
                剩余调课
              </div>
            </div>
            <a-divider direction="vertical" style="height: 16px;" :margin="0" />
            <div class="flex-col-between-center flex-1">
              <div class="mb-4px h-18px">
                <CellStatus :status="item.enrollment.isRenewal" on-text="" off-text="" />
              </div>
              <div class="text-12px color-gray-5">
                续报状态
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-spin>
  </div>
  <ImportClassStudent ref="importClassStudent" @change="getList" />
</template>

<style lang="less" scoped>
:deep(.arco-radio-checked) {
  background: rgb(var(--primary-6));
  color: var(--color-bg-5);
}

.item {
  border-radius: 6px;
  border: 1px solid #e5e6eb;
  padding: 12px;
  width: 288px;
}
</style>
